<template>
  <div>
    <button
      v-for="item in total"
      :key="item"
      :class="{ active: currentPage === item }"
      @click="changeCurrentPage(item)"
    >
      {{ item }}
    </button>

    <span>每页{{ limit }}条</span>
    <select @change="changeLimit(+$event.target.value)">
      <option v-for="item in limitList" :key="item" :value="item">
        每页{{ item }}条
      </option>
    </select>
  </div>
</template>

<script>
/* 
  页码组件希望接受数据:
    1. 当前页 currentPage
    2. 总页数 total
    3. 每页条数 limit
    4. 每页条数选项 limitList 

*/
export default {
  name: "Pagination",
  props: [
    "currentPage",
    "total",
    "limit",
    "limitList",
    "changeCurrentPage",
    "changeLimit",
  ],
};
</script>

<style scoped>
.active {
  background: red;
}
</style>
